iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1

中秋連假太懶啦!下週還有國慶連假... 究竟能不能順利完賽呢...


今天就來看看偶然看到的地圖服務吧!
https://ithelp.ithome.com.tw/upload/images/20201002/20130663GSWCSoUt6Q.png

所有服務中找到Azure地圖服務帳戶

點進來一樣按下新增或是建立
https://ithelp.ithome.com.tw/upload/images/20201002/20130663pRqtjRk8rB.png

需要設定的項目非常少,定價層也只有S0及S1兩種選擇,詳細說明可以點進定價層指南看看文件,主要的差別是資料輸送量以及功能多寡,測試用的選擇S0即可。
https://ithelp.ithome.com.tw/upload/images/20201002/201306632XMeYnpxcg.png

按下Create後馬上就部署完成了,接著可以點擊前往資源到剛剛建立的Azure Map的頁面。
https://ithelp.ithome.com.tw/upload/images/20201002/20130663p4SqOCF7Ry.png

這個頁面中比較會用到的是驗證,在建立網頁時,需要透過其中的金鑰來取得驗證。
https://ithelp.ithome.com.tw/upload/images/20201002/20130663OSGxVyJNRq.png

文件中,給了一個簡單的範例,可以先到GitHub Demo複製.html檔案的程式碼。
https://ithelp.ithome.com.tw/upload/images/20201002/20130663xKYqVwEAUJ.png

接著將其中的Your Azure Maps Key改成驗證頁面的主要金鑰
https://ithelp.ithome.com.tw/upload/images/20201002/201306636CBkuYsIUw.png
https://ithelp.ithome.com.tw/upload/images/20201002/20130663jXCKGlz8qz.png

將.html檔案以瀏覽器開啟,即可看到Micrsoft提供的地圖。
https://ithelp.ithome.com.tw/upload/images/20201002/2013066388q9WOdCtN.png
預設的地圖中心是在洛杉磯。
想要更改的話,可以搜尋程式碼中的center,找到[經度, 緯度]。
https://ithelp.ithome.com.tw/upload/images/20201002/20130663oK5FH9mscI.png

舉例來說,改為center: [-74.0060, 40.7128]即可將地圖預設中心改到紐約。
https://ithelp.ithome.com.tw/upload/images/20201002/20130663LAB2PwUjMi.png
center: [25.031000, 121.536073]則是台北。

當然,除了簡單的呈現地圖之外,Azure還提供許多功能及API方便我們使用地圖服務
在文件中即有搜尋服務地圖控制項等等的範例,有興趣有時間的話再來研究並實作吧!


上一篇
Web App - 部署
下一篇
Azure Function-建立
系列文
飛上雲端-Azure30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言